<template>
  <ul class="todo-main">
    <Item v-for="item in todoList" :key="item.id" v-bind='item'/>
  </ul>
</template>

<script>
import { nanoid } from 'nanoid';
import Item from "./Item"
export default {
  name: "List",
  data() {
    return {
      todoList:[
        {id:nanoid(),thing:"唱",done:false},
        {id:nanoid(),thing:"跳",done:false},
        {id:nanoid(),thing:"rap",done:false}
      ]
    }
  },
  components:{
      Item
  },
  mounted(){
    this.$bus.$emit('getTodo',this.todoList)
    
    this.$bus.$on('addList',(todo)=>{
      this.todoList.unshift(todo)
    })
  },
  watch:{
    todoList:{
      deep:true,
      handler(value){
       this.$bus.$emit('getTodo',value)
      }
    }
  }
};
</script>

<style scoped>
/*main*/
.todo-main {
  list-style: none;
  margin-left: 0px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding: 0px;
}

.todo-empty {
  height: 40px;
  line-height: 40px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding-left: 5px;
  margin-top: 10px;
}

</style>